@width: 100%;

.display {
  display: inline-block;
  vertical-align: top;
}

.box {
  box-sizing: border-box;
}

.ly-content {

  .ly-register {
    .ly-reg {
      width: @width;
      margin-top: 30px;
      padding: 30px 80px;
      font-size: 0;
      .box;
      li {
        position: relative;
        width: @width/4;
        .display;
        font-size: 16px;
        text-align: center;
        &.ly-cation {
          span {
            background: #d43f3a;
            color: #fff;
          }
          &:after {
            border: 1px dashed #d43f3a;
          }
        }
        &:nth-child(1) {
          &:after {
            width: @width;
            height: 2px;
            content: "";
            position: absolute;
            top: 19px;
            right: 50%;
            border: 1px dashed #fff;
          }
        }
        &:after {
          width: @width;
          height: 2px;
          content: "";
          position: absolute;
          top: 19px;
          right: 50%;
          border: 1px dashed #999;
          .box;
          z-index: -2;
        }
        span {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: #ccc;
          position: relative;
          z-index: -1;
          font-size: 18px;
          line-height: 40px;
          display: block;
          color: #111;
          margin: 0 auto;
        }
        p {
          color: #333;
          line-height: 40px;
        }
      }
    }
    .ly-list {
      padding: 40px 150px;
      .box;
      display: none;
      &#ly-mit-1 {
        display: block;
      }
      h1 {
        font-weight: 700;
        font-size: 18px;
        line-height: 30px;
        margin-top: 20px;
      }
      li {
        width: @width;
        line-height: 50px;
        padding: 5px 0;
        .box;
        .ly-input {
          width: 300px;
          height: 40px;
          border: none;
          font-size: 14px;
          border-bottom: 1px solid #ccc;
        }
        .ly-code {
          font-size: 14px;
          margin-left: 20px;
          color: #333;
          cursor: pointer;
        }
        .ly-submit {
          width: 300px;
          height: 35px;
          line-height: 35px;
          background: #000;
          color: #fff;
          cursor: pointer;
          text-align: center;
          font-size: 16px;
          margin: 60px 0;
          display: block;
        }
        .ly-select {
          width: 300px;
          height: 40px;
          border: none;
          font-size: 14px;
          border-bottom: 1px solid #ccc;
        }
        p {
          line-height: 25px;
          input {
            float: left;
            margin: 6px 4px;
          }
        }
      }
    }
  }
}

@media screen  and (max-width: 980px) {

  .ly-intro {
    position: static;
    margin: 0 auto 30px;
  }
}

@media screen  and (max-width: 760px) {
  .ly-content {
    .ly-register {
      .ly-reg {
        padding: 20px 0;
        li {
          span {
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
          }
          &:after {
            top: 15px;
          }
          p {
            font-size: 12px;
          }
          &.ly-cation {
            span {
              background: #000;
            }
            &:after{
             border: 1px dashed #000;
            }
          }
          &:nth-child(1):after{
            border: 1px dashed #fff;
          }
        }
      }
      .ly-list{
        padding: 40px 0;
        li {
          padding: 5px;
          position: relative;
          .ly-input{
            width: @width;
          }
          .ly-submit{
            width: @width;
          }
          .ly-select{
            width: @width;
          }
          .ly-code{
            position: absolute;
            top: 5px;
            right: 5px;
          }
        }
      }
    }
  }

  ._citys{
    width: @width;
  }
}